import createEditor from './editor'
import background from './better.png'
import './global.css'

const editor = createEditor()
document.body.appendChild(editor)

const img = new Image()
img.src = background
document.body.appendChild(img)

// 因为我们要修改editor这个脚本文件，而这里导入了，所以需要在这里写模块热替换逻辑
// 我们使用了webpack.HotModuleReplacementPlugin插件，他提供了一些api

/**
 * module.hot.accept：注册一个文件的模块热替换处理函数
 * 参数：1.热替换的文件路径，2.处理函数
 * 会运行函数里面的内容，页面不会刷新了
 */

if (module.hot) {
    // editor文件的热替换处理函数
    let lastEditor = editor
    module.hot.accept('./editor', () => {
        console.log('模块更新了')
        //因为是个方法，且是个文本编辑器，为了保持页面状态，我们需要先保存页面数据
        // 然后删除之前的方法，在创建一个新的方法
        let value = lastEditor.innerHTML
        document.body.removeChild(lastEditor)

        let newEditor = createEditor()
        newEditor.innerHTML = value
        document.body.append(newEditor)
        document.body.append(newEditor222444)

        lastEditor = newEditor
    })

    // 图片的热替换处理函数
    module.hot.accept('./better.png', () => {
        img.src = background
    })
}



